<route lang="json5" type="home">
{
  style: { navigationBarTitleText: '首页' },
}
</route>

<template>
  <view class="bg-slate-100 min-h-full box-border pb-1">
    <view class="bg-slate-100 px-4 pt-3">
      <view class="list-container">
        <view v-for="item in pageDemos" :key="item.path" class="mb-3">
          <view
            class="flex bg-white items-center justify-between p-3 mb-2"
            @click="goDetailPage(item.path)"
          >
            <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
            <text class="i-carbon-chevron-right"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import pagesJson from '@/pages.json'

const handleTitle = (str?: string) => {
  if (!str) {
    return '标题'
  }
  if (/%.*%/.test(str)) {
    return '多语言'
  }
  return str
}

/** 页面功能 */
const pageDemos = pagesJson.pages
  .filter((e) => e.path.startsWith('pages/demo') && !e.hide)
  .map((e) => ({
    title: handleTitle(e.style?.navigationBarTitleText),
    path: e.path,
  }))

const goDetailPage = (path: string) => {
  const url = `/${path}`
  uni.navigateTo({
    url,
  })
}
</script>

<style>
page {
  height: 100%;
}

.tab-container {
  display: flex;
}
</style>
